<template>
  <div>
    <el-dialog
      :title="mode==='add'?'新增页面':'编辑页面'"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      :append-to-body="true"
      width="750px"
      @close="close"
    >
      <el-form
        ref="form"
        v-loading="loading"
        :model="form"
        :rules="rules"
        label-width="100px"
        label-suffix="："
        size="small"
      >
        <el-form-item label="页面名称" prop="name">
          <el-input v-model="form.name" maxlength="12" show-word-limit />
        </el-form-item>
        <el-form-item label="页面类型" prop="subType">
          <el-select v-model="form.subType" :disabled="mode==='edit'" placeholder="请选择页面类型" class="w-100-per">
            <el-option v-for="item in pageTreeOptions" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="页面模板" prop="style">
          <el-select v-model="form.style" :disabled="mode==='edit'" placeholder="请选择页面模板" class="w-100-per">
            <el-option
              v-for="item in pageStyleOptions[form.subType]"
              :key="item.key"
              :label="item.label"
              :value="item.key"
            />
          </el-select>
        </el-form-item>
        <el-form-item v-if="form.subType==='activity'" label="有效期" prop="dateExclude">
          <el-date-picker
            v-model="form.dateExclude"
            :default-time="['00:00:00', '23:59:00']"
            type="datetimerange"
            range-separator="~"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd HH:mm"
            format="yyyy-MM-dd HH:mm"
            class="w-100-per"
          >>
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button :disabled="loading" size="small" round @click="hide">取 消</el-button>
        <el-button :disabled="loading" size="small" round type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  addPage,
  getPageConfig,
  editPageConfig
} from '@/views/wxaBuildModule/api/page'
import wxaBuildConfig from '@/views/wxaBuildModule/config'

export default {
  data() {
    return {
      // 校验规则
      rules: {
        name: [
          { required: true, message: '请输入页面名称', trigger: 'change' }
        ],
        subType: [
          { required: true, message: '请选择页面类型', trigger: 'change' }
        ],
        style: [
          { required: true, message: '请选择页面模板', trigger: 'change' }
        ]
      },
      // 配置
      pageTreeOptions: [],
      pageStyleOptions: {},
      resolve: null,
      reject: null,
      // 状态
      dialogVisible: null,
      loading: false,
      // 数据
      mode: 'add',
      classifyCode: 'DEFAULT',
      form: {
        name: '',
        type: '', // system: 系统预设页面, topic: 专题页面
        subType: '',
        dateExclude: [],
        validTime: '',
        invalidTime: '',
        bg: '',
        color: '',
        content: '',
        limitTime: false,
        title: '',
        path: '',
        pic: '',
        primaryPage: false,
        ranking: 0,
        style: '',
        subTitle: ''
      }
    }
  },
  watch: {
    'form.subType'(newVal, oldVal) {
      if (newVal && oldVal) this.form.style = ''
    }
  },
  mounted() {
    this.pageTreeOptions = wxaBuildConfig[this.classifyCode].pageTree
    this.pageStyleOptions = wxaBuildConfig[this.classifyCode].pageStyle
  },
  methods: {
    /**
     * 弹框相关
     */
    open({ mode = 'add', id = '' }) {
      this.mode = mode
      if (this.mode === 'edit' && id) {
        this.getConfig(id)
      }
      this.show()
      return new Promise((resolve, reject) => {
        this.resolve = resolve
        this.reject = reject
      })
    },

    show() {
      this.dialogVisible = true
    },

    close() {
      this.loading = false
      this.form = {
        name: '',
        type: '', // system: 系统预设页面, topic: 专题页面
        subType: '',
        dateExclude: [],
        validTime: '',
        invalidTime: '',
        bg: '',
        color: '',
        content: '',
        limitTime: false,
        title: '',
        path: '',
        pic: '',
        primaryPage: false,
        ranking: 0,
        style: '',
        subTitle: ''
      }
      this.$nextTick(() => {
        this.$refs.form.clearValidate()
      })
    },

    hide() {
      this.resolve = null
      this.reject = null
      this.dialogVisible = false
    },

    /**
     * 数据组
     */
    // 获取数据
    getConfig(id) {
      this.loading = true
      const params = { classifyCode: this.classifyCode, pageId: id }
      getPageConfig(params)
        .then((res) => {
          const data = res.data
          if (data.limitTime && data.validTime && data.invalidTime) {
            data.dateExclude = [data.validTime, data.invalidTime]
          }
          this.form = data
        })
        .finally(() => {
          this.loading = false
        })
    },

    /**
     * 按钮组
     */
    // 确定
    submit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          const data = JSON.parse(JSON.stringify(this.form))
          if (
            data.subType === 'activity' &&
              data.dateExclude &&
              data.dateExclude.length === 2
          ) {
            data.validTime = data.dateExclude[0]
            data.invalidTime = data.dateExclude[1]
            data.limitTime = true
          } else {
            data.validTime = ''
            data.invalidTime = ''
            data.limitTime = false
          }
          data.type = data.subType
          this.loading = true
          const params = { params: { classifyCode: this.classifyCode }, data }
          if (this.mode === 'add') {
            this.add(params)
          } else {
            this.edit(params)
          }
        }
      })
    },

    add(params) {
      addPage(params)
        .then((res) => {
          this.$notify({
            title: '成功',
            message: '新增页面成功',
            type: 'success',
            duration: 2000,
            offset: 40
          })
          this.resolve && this.resolve()
          this.hide()
        })
        .catch((err) => {
        })
        .finally(() => {
          this.loading = false
        })
    },

    edit(params) {
      editPageConfig(params)
        .then((res) => {
          this.$notify({
            title: '成功',
            message: '更新页面成功',
            type: 'success',
            duration: 2000,
            offset: 40
          })
          this.resolve && this.resolve()
          this.hide()
        })
        .catch((err) => {
        })
        .finally(() => {
          this.loading = false
        })
    }

    /**
     * 状态组
     */

    /**
     * 方法组
     */
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.w-100-per {
  width: 100% !important;
}
</style>
